<template>
    <li class="mgt16 comment">
        <div class="context font14">
            {{ comment.content }}
            <div class="reply-layout" v-if="comment.children.length > 0 || replyVisible">
                <div class="reply-item font12 font-color" v-for="(item, index) in comment.children" :key="index"
                    :index="index">
                    <div class="left">
                        <span class="name font-color--main">{{ item.userName }}:@{{ item.respondentName }}</span>
                        <span>
                            <div>
                                {{ item.content }}
                            </div>
                        </span>
                    </div>
                    <div class="right flex-align">
                        <span class="mgr16">{{ item.commentTime }}</span>
                        <div class="item common_pointer flex-align mgr16" @click="reply(item)">
                            <i class="el-icon-chat-line-square icont-weight"></i>回复
                        </div>
                        <div class="item common_pointer flex-align" @click="deleteComment(item.id)">
                            <i class="el-icon-delete"></i>删除
                        </div>
                    </div>
                </div>

                <div v-show="replyVisible">
                    <div class="my-reply">
                        <div class="reply-info">
                            <b class="font12 font-color--main name" v-if="replyItemVisble">@{{ replyItem.userName }}：</b>
                            <b class="font12 font-color--main name" v-else>@{{ comment.respondentName }}：</b>
                            <el-input class="reply-input reply-comment-input font12" placeholder="输入评论..."
                                v-model="insertComment.content">
                            </el-input>
                        </div>
                    </div>
                    <div class="buttons">
                        <el-button class="el-button el-button--default el-button--medium" @click="resetReply">
                            <span>取消</span>
                        </el-button>

                        <el-button class="el-button el-button--primary el-button--medium" @click="insertReply(comment.id)">
                            <span>发表评论</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="comment-foot flex-align font12">
            <div class="left flex-align">
                <img class="avatar" :src="circleUrl" alt="userImg">
                <h3 class="font14 font-color">
                    {{ comment.userName }}
                </h3>
                <span>
                    {{ comment.commentTime }}
                </span>
            </div>
            <div class="right flex-align font-color">
                <div class="item flex-align common_pointer" @click="replyVisible = true">
                    <i class="el-icon-chat-line-square icont-weight"></i>回复
                </div>
                <div class="item flex-align common_pointer" @click="deleteComment(comment.id)">
                    <i class="el-icon-delete"></i>删除
                </div>
            </div>
        </div>
    </li>
</template>

<script>
import circleUrl from "../../../assets/classDetail/work.png";
import {getRequest, postRequest} from "@/utils/api";

export default {
    name: "commentItem",
    components: {
    },
    props: {
        comment: {
        }
    },
    data() {
        return {
            circleUrl: circleUrl,
            insertComment: {
                userId: 0,
                workId: 0,
                superiorId: 0,
                content: '',
            },
            replyItem: {},
            replyVisible: false,
            replyItemVisble: false,
            insertVisible: false,
        }
    },
    methods: {
        // 发表回复评论
        insertReply(superiorId) {
            if (this.insertComment.content === '') return this.$message.error("请输入评论内容");
            this.insertComment.userId = 3;//this.$store.getters.user.id;
            this.insertComment.workId = 1;//this.$store.getters.workId;
            this.insertComment.superiorId = superiorId;
            if (this.replyItemVisble) {
                this.insertComment.respondentId = this.replyItem.userId;
            } else this.insertComment.respondentId = this.comment.userId;
            postRequest('/workComment/insert', this.insertComment).then(res => {
              console.log(res);
                // 清空新增评论
                this.insertComment.content = null;
                this.$parent.init();
            })
            this.replyVisible = false;
            this.replyItemVisble = false;
        },
        reply(item) {
            this.replyItem = item;
            this.replyVisible = true;
            this.replyItemVisble = true;
        },
        resetReply() {
            this.insertComment.content = null;
            this.replyVisible = false;
            this.replyItemVisble = false;
        },
        deleteComment(id) {
            this.$confirm('', '您确定要删除吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                getRequest(`/workComment/delete/${id}`).then(res => {
                  console.log(res);
                    this.$parent.init();
                })
            }).catch(() => {
            });
        },
    },
}
</script>

<style scoped lang="less">
.font12 {
    color: #74787c;
    padding: 0 8px;
    font-size: 12px;
}

.font-color {
    color: #3c4043;
}

span {
    outline: none;
}

.flex-align {
    display: flex;
    align-items: center;
}

.mgr16 {
    margin-right: 16px;
}

.comment {
    list-style-type: none;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 24px;
    position: relative;

    .context {
        line-height: 24px;
        margin-bottom: 16px;
        font-size: 14px;

        .reply-layout {
            background: #f8f9fa;
            padding: 16px 24px;
            border-radius: 4px;
            margin: 0 0 16px 0;

            .reply-item {
                display: flex;
                margin: 10px 0;

                .left {
                    flex: 1;

                    .font-color--main {
                        color: #4285f4;
                    }
                }

                .right {
                    .common_pointer {
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        cursor: pointer;
                    }
                }
            }

            .my-reply {
                .reply-info {
                    border-radius: 4px;
                    width: 97%;
                    background: #fff;
                    padding: 16px;

                    .name {
                        margin-bottom: 8px;
                        display: block;
                    }

                    .font-color--main {
                        color: #4285f4;
                    }
                }
            }

            .buttons {
                display: flex;
                justify-content: flex-end;
                margin-top: 16px;
            }
        }
    }

    .comment-foot {
        border-top: 1px solid #dadce0;
        padding-top: 10px;
        font-size: 12px;

        .left {
            flex: 1;

            .avatar {
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }

            h3 {
                font-weight: 500;
                margin: 0 10px 0 8px;
                color: #3c4043;
                font-size: 14px;
            }

            span {
                color: #74787c;
            }
        }

        .right {
            .common_pointer {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
                margin-right: 16px;

            }
        }
    }

    .icont-weight {
        font-size: 14px;
        font-weight: 700;
        margin-right: 5px;
    }
}
</style>
